import { Card, Statistic, Row, Col} from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';

export  default  ()=>{
  return  <div  style={{
    marginBottom: 24,
  }}>
    <Row gutter={16}>
      <Col xl={6} lg={24} md={24} sm={24} xs={24}>
        <Card>
          <Statistic
            title="Active"
            value={11.28}
            precision={2}
            valueStyle={{ color: '#3f8600' }}
            prefix={<ArrowUpOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
      <Col xl={6} lg={24} md={24} sm={24} xs={24}>
        <Card>
          <Statistic
            title="Active"
            value={11.28}
            precision={2}
            valueStyle={{ color: '#3f8600' }}
            prefix={<ArrowDownOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
      <Col xl={6} lg={24} md={24} sm={24} xs={24}>
        <Card>
          <Statistic
            title="Active"
            value={11.28}
            precision={2}
            valueStyle={{ color: '#3f8600' }}
            prefix={<ArrowUpOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
      <Col xl={6} lg={24} md={24} sm={24} xs={24}>
        <Card>
          <Statistic
            title="Active"
            value={11.28}
            precision={2}
            valueStyle={{ color: '#3f8600' }}
            prefix={<ArrowDownOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
    </Row>

  </div>
}
